import { useEffect, useState } from "react";
import { Container, Table } from "react-bootstrap";
import { CollectionResponseDTO } from "poetry";
import api from "../request";
import { Button } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import useInputBox from "../Modal/InputBox_Context";
import useMessageBox from "../Modal/MessageBox_Context";
import { useRequireLogin } from "../utils";
import { ValidatorNotEmpty } from "../Modal/InputBox";

function CollectionPage() {
    useRequireLogin();

    /** @type {[CollectionResponseDTO[], ]} */
    const [collections, setCollections] = useState([]);
    const showInputBox = useInputBox();
    const showMessageBox = useMessageBox();
    const navigate = useNavigate();

    function fetchData() {
        api.listCollections((err, data, _) => {
            if (err) throw err;
            setCollections(data.data);
        });
    }

    useEffect(fetchData, []);

    function handleRename(collectionId) {
        showInputBox('重命名收藏夹', '请输入新的收藏夹名称', ValidatorNotEmpty).then(newTitle => {
            if (!newTitle) return;
            api.editCollection({ id: collectionId, title: newTitle }, (err, data, _) => {
                if (err) throw err;
                setCollections(collections.map(c => c.id === collectionId ? { ...c, title: newTitle } : c));
            });
        });
    }

    function handleDelete(collectionId) {
        showMessageBox('删除收藏夹', '确定要删除这个收藏夹吗？', 'yesno').then((result) => {
            if (result !== 'yes') return;
            api.deleteCollection({ id: collectionId }, (err, data, _) => {
                if (err) throw err;
                setCollections(collections.filter(c => c.id !== collectionId));
            });
        });
    }

    function handleNew() {
        showInputBox('新建收藏夹', '请输入收藏夹名称', ValidatorNotEmpty).then(title => {
            if (!title) return;
            api.createCollection({ title, desc: '' }, (err, data, _) => {
                if (err) throw err;
                fetchData();
            });
        });
    }

    return (
        <Container>
            <h1>收藏夹</h1>
            <Button variant="primary" className="mt-4" onClick={() => handleNew()}>新建收藏夹</Button>
            <Table className="col-6 ">
                <thead>
                    <tr>
                        <th>收藏夹</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {collections?.map(collection => (
                        <tr key={collection.id}>
                            <td>{collection.title}</td>
                            <td>{new Date(collection.creationTime).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false })}</td>
                            <td>
                                <Button variant="primary" onClick={() => navigate('/me/collection/' + collection.id)}>查看</Button>
                                <Button variant="primary" className="ms-2" onClick={() => handleRename(collection.id)}>改名</Button>
                                <Button variant="danger" className="ms-2" onClick={() => handleDelete(collection.id)}>删除</Button>
                            </td>
                        </tr>
                    ))}
                </tbody>

            </Table>
        </Container>
    );
}

export default CollectionPage;